<pro-header [title]="'高级表单'">
    <ng-template #content>高级表单常见于一次性输入和提交大批量数据的场景。（示例采用响应式表单，也可使用模板驱动方式）</ng-template>
</pro-header>
<form nz-form [formGroup]="form" (ngSubmit)="_submitForm()" [nzLayout]="'vertical'">
    <nz-card [nzBordered]="false" nzTitle="仓库管理">
        <div nz-row [nzGutter]="16">
            <div nz-col nzMd="6" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>仓库名</label></div>
                    <div nz-form-control nz-col nzHasFeedback [nzValidateStatus]="name">
                        <nz-input formControlName="name" nzPlaceHolder="请输入仓库名称" nzSize="large"></nz-input>
                        <p nz-form-explain *ngIf="(name.dirty || name.touched) && name.errors?.required">
                            请输入仓库名称
                        </p>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:6, offset:2}" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>仓库域名</label></div>
                    <div nz-form-control nz-col nzHasFeedback [nzValidateStatus]="url">
                        <nz-input formControlName="url" nzPlaceHolder="请输入" nzSize="large">
                            <ng-template #addOnBefore>http://</ng-template>
                            <ng-template #addOnAfter>.com</ng-template>
                        </nz-input>
                        <p nz-form-explain *ngIf="(url.dirty || url.touched) && url.errors?.required">
                            请输入仓库域名
                        </p>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:8, offset:2}" nzSm="24" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>仓库管理员</label></div>
                    <div nz-form-control nz-col [nzValidateStatus]="owner">
                        <nz-select formControlName="owner" [nzPlaceHolder]="'请选择管理员'" [nzShowSearch]="true" nzSize="large">
                            <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value">
                            </nz-option>
                        </nz-select>
                        <p nz-form-explain *ngIf="(owner.dirty || owner.touched) && owner.errors?.required">
                            请选择管理员
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div nz-row [nzGutter]="16">
            <div nz-col nzMd="6" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>审批员</label></div>
                    <div nz-form-control nz-col [nzValidateStatus]="approver">
                        <nz-select formControlName="approver" [nzPlaceHolder]="'请选择管理员'" [nzShowSearch]="true" nzSize="large">
                            <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value">
                            </nz-option>
                        </nz-select>
                        <p nz-form-explain *ngIf="(approver.dirty || approver.touched) && approver.errors?.required">
                            请选择审批员
                        </p>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:6, offset:2}" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>生效日期</label></div>
                    <div nz-form-control>
                        <div nz-col [nzSpan]="11">
                            <div nz-form-item nz-row>
                                <div nz-form-control [nzValidateStatus]="time_start">
                                    <nz-datepicker formControlName="time_start" [nzPlaceHolder]="'开始日期'"></nz-datepicker>
                                    <p nz-form-explain *ngIf="(time_start.dirty || time_start.touched) && time_start.errors?.required">
                                        请选择开始日期
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div nz-col [nzSpan]="2">
                            <p nz-form-split>-</p>
                        </div>
                        <div nz-col [nzSpan]="11">
                            <div nz-form-item nz-row>
                                <div nz-form-control [nzValidateStatus]="time_end">
                                    <nz-datepicker formControlName="time_end" [nzPlaceHolder]="'结束日期'"></nz-datepicker>
                                    <p nz-form-explain *ngIf="(time_end.dirty || time_end.touched) && time_end.errors?.required">
                                        请选择结束日期
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:8, offset:2}" nzSm="24" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>仓库类型</label></div>
                    <div nz-form-control nz-col [nzValidateStatus]="type">
                        <nz-select formControlName="type" nzSize="large" [nzShowSearch]="true" [nzPlaceHolder]="'请选择仓库类型'">
                            <nz-option [nzLabel]="'私密'" [nzValue]="'private'"></nz-option>
                            <nz-option [nzLabel]="'公开'" [nzValue]="'public'"></nz-option>
                        </nz-select>
                        <p nz-form-explain *ngIf="(type.dirty || type.touched) && type.errors?.required">
                            请选择仓库类型
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </nz-card>
    <nz-card [nzBordered]="false" nzTitle="任务管理">
        <div nz-row [nzGutter]="16">
            <div nz-col nzMd="6" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>任务名</label></div>
                    <div nz-form-control nz-col nzHasFeedback [nzValidateStatus]="name2">
                        <nz-input formControlName="name2" nzPlaceHolder="请输入任务名" nzSize="large"></nz-input>
                        <p nz-form-explain *ngIf="(name2.dirty || name2.touched) && name2.errors?.required">
                            请输入任务名
                        </p>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:6, offset:2}" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>任务描述</label></div>
                    <div nz-form-control nz-col nzHasFeedback [nzValidateStatus]="summary">
                        <nz-input formControlName="summary" [nzType]="'textarea'" [nzAutosize]="true" nzPlaceHolder="请输入任务描述" nzSize="large"></nz-input>
                        <p nz-form-explain *ngIf="(summary.dirty || summary.touched) && summary.errors?.required">
                            请输入任务描述
                        </p>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:8, offset:2}" nzSm="24" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>执行人</label></div>
                    <div nz-form-control nz-col [nzValidateStatus]="owner2">
                        <nz-select formControlName="owner2" [nzPlaceHolder]="'请选择执行人'" [nzShowSearch]="true" nzSize="large">
                            <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value">
                            </nz-option>
                        </nz-select>
                        <p nz-form-explain *ngIf="(owner2.dirty || owner2.touched) && owner2.errors?.required">
                            请选择执行人
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div nz-row [nzGutter]="16">
            <div nz-col nzMd="6" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>责任人</label></div>
                    <div nz-form-control nz-col [nzValidateStatus]="approver2">
                        <nz-select formControlName="approver2" [nzPlaceHolder]="'请选择责任人'" [nzShowSearch]="true" nzSize="large">
                            <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value">
                            </nz-option>
                        </nz-select>
                        <p nz-form-explain *ngIf="(approver2.dirty || approver2.touched) && approver2.errors?.required">
                            请选择责任人
                        </p>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:6, offset:2}" nzSm="12" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>生效时间</label></div>
                    <div nz-form-control nz-col [nzValidateStatus]="time">
                        <nz-timepicker formControlName="time" nzPlaceHolder="请选择" nzSize="large"></nz-timepicker>
                        <p nz-form-explain *ngIf="(time.dirty || time.touched) && time.errors?.required">
                            请选择生效时间
                        </p>
                    </div>
                </div>
            </div>
            <div nz-col [nzMd]="{span:8, offset:2}" nzSm="24" nzXs="24">
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col><label>任务类型</label></div>
                    <div nz-form-control nz-col [nzValidateStatus]="type2">
                        <nz-select formControlName="type2" nzSize="large" [nzShowSearch]="true" [nzPlaceHolder]="'请选择任务类型'">
                            <nz-option [nzLabel]="'私密'" [nzValue]="'private'"></nz-option>
                            <nz-option [nzLabel]="'公开'" [nzValue]="'public'"></nz-option>
                        </nz-select>
                        <p nz-form-explain *ngIf="(type2.dirty || type2.touched) && type2.errors?.required">
                            请选择任务类型
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </nz-card>
    <nz-card [nzBordered]="false" nzTitle="成员管理">
        <nz-table formArrayName="items" [nzDataSource]="items.value" [nzIsPagination]="false">
            <thead nz-thead>
                <tr>
                    <th nz-th>成员姓名</th>
                    <th nz-th>工号</th>
                    <th nz-th>所属部门</th>
                    <th nz-th>操作</th>
                </tr>
            </thead>
            <tbody nz-tbody>
                <tr nz-tbody-tr *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
                    <td nz-td>
                        <span *ngIf="editIndex!==i">{{items.value[i].name}}</span>
                        <span *ngIf="editIndex===i" nz-form-control [nzValidateStatus]="item.controls.name">
                            <nz-input formControlName="name" nzPlaceHolder="请输入成员姓名" nzSize="large"></nz-input>
                        </span>
                    </td>
                    <td nz-td>
                        <span *ngIf="editIndex!==i">{{items.value[i].workId}}</span>
                        <span *ngIf="editIndex===i" nz-form-control [nzValidateStatus]="item.controls.workId">
                            <nz-input formControlName="workId" nzPlaceHolder="请输入工号" nzSize="large"></nz-input>
                        </span>
                    </td>
                    <td nz-td>
                        <span *ngIf="editIndex!==i">{{items.value[i].department}}</span>
                        <span *ngIf="editIndex===i" nz-form-control [nzValidateStatus]="item.controls.department">
                            <nz-input formControlName="department" nzPlaceHolder="请输入所属部门" nzSize="large"></nz-input>
                        </span>
                    </td>
                    <td nz-td>
                        <span *ngIf="editIndex!==i">
                            <a (click)="edit(i)">编辑</a>
                            <span nz-table-divider></span>
                            <nz-popconfirm (nzOnConfirm)="del(i)" [nzTitle]="'是否要删除此行？'">
                                <a nz-popconfirm>删除</a>
                            </nz-popconfirm>
                        </span>
                        <span *ngIf="editIndex===i">
                            <a (click)="save(i)">保存</a>
                            <span nz-table-divider></span>
                            <nz-popconfirm (nzOnConfirm)="cancel(i)" [nzTitle]="'是否要取消操作？'">
                                <a nz-popconfirm>取消</a>
                            </nz-popconfirm>
                        </span>
                    </td>
                </tr>
            </tbody>
        </nz-table>
        <button *ngIf="editIndex===-1" nz-button [nzType]="'dashed'" [nzSize]="'large'" (click)="add()" class="ant-btn__block mt-md">
            <i class="anticon anticon-plus"></i>
            <span>新增成员</span>
        </button>
    </nz-card>
    <footer-toolbar errorCollect>
        <button nz-button [nzType]="'primary'" nzSize="large">提交</button>
    </footer-toolbar>
</form>
